<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-组件-2</title>
</head>
<body>
<div id="root">

</div>
</body>
<script src="../../lib/react/react.development.js"></script>
<script src="../../lib/react/react-dom.development.js"></script>
<script src="../../lib/react/babel.min.js"></script> <!--jsx -->
<script type="text/babel">

  /*  let Card = function () {
      return <div>
        <div>header</div>
        <div>body</div>
        <div>footer</div>
      </div>
    }*/

  let Card = function (props) {
    return <div>
      <div>{props.header}</div>
      <div>{props.body}</div>
      <div>{props.footer}</div>
    </div>
  }


  let header = "header2";
  let body = "body2";
  let footer = "footer2";

  /*let ele = <Card header="header1" body="body1" footer="footer1"/>;*/

  class Card2 extends React.Component {
    render() {
      return <h1>{this.props.title}</h1>
    }
  }
  //let ele = <Card header={header} body={body} footer="footer1"/>;

  let ele2 = <Card2 title="header23"/>;

  ReactDOM.render(ele2, document.getElementById('root'));

</script>
</html>
